<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频播放</title>
</head>

<body>
  <main>
    <video id="videoUrl" muted autoplay></video>
    <div class="video-intr">
      <h1>
        <span id="curNum">-</span>/<span id="totalNum">-</span>
      </h1>
      <p class="title">----</p>
    </div>
  </main>
  <footer>
    <i class="iconfont icon-leftarrow" id="prev"></i>
    <i class="iconfont icon-stop" id="pause"></i>
    <i class="iconfont icon-rightarrow" id="next"></i>
    <!-- 进度条 -->
    <p class="progress" id="progress"></p>
  </footer>

  <!-- 模态框 -->
  <div class="video-modal" id="videoModal">
    <h3>放弃需要一万个理由,坚持只需要一个信念</h3>

    <div class="modal-position">
      <!-- 2个按钮 -->
      <div class="pasue-play">
        <button id="goOn">
          <i class="iconfont icon-rightarrow"></i>
          <span>继续训练</span>
        </button>
        <button id="end">
          <i class="iconfont icon-location"></i>
          <span>结束</span>
        </button>
      </div>

      <!-- 视频的图片和文字 -->
      <div class="video-img">
        <img alt="" width="132" height="100" id="imgUrl">
        <p>
          <span>当前:</span>
          <em class="title">----</em>
        </p>
      </div>
    </div>
  </div>
</body>

</html>